<template>
  <el-aside width="200px"><el-scrollbar>
    <el-menu @select="handleSelect">
      <el-menu-item index="1">
        <router-link :to="'/'"/>
        <el-icon><House/></el-icon>欢迎
      </el-menu-item>
      <el-sub-menu v-for="(item,i) in options" :key="item.id" :index="item.id">
        <template #title>
          <el-icon><message /></el-icon>{{item.name}}
        </template>
          <el-menu-item v-for="(child,j) in item.children" :key="child.id" :index="child.id">
            <el-icon><Notification /></el-icon>{{child.name}}</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-scrollbar></el-aside>
  <el-main>
    <div class="home">
      <el-row>
        <el-col
            v-for="(o) in books"
            :key="o.id"
            :span="8"
            :offset="2"
        >
          <el-card :body-style="{ padding: '0px' }">
            <img
                :src="o.cover"
                class="image"
            />
            <div style="padding: 14px">
              <span>{{o.name}}</span>
              <div class="bottom">
                <time class="time">{{ o.description }}</time>
                <router-link :to="'/doc?ebookId='+o.id"><el-button text class="button">查看</el-button></router-link>
              </div>
              <div class="bottom">
                <span>文档数：{{o.docCount}}</span>
                <span>阅读数：{{o.viewCount}}</span>
                <span>点赞数：{{o.voteCount}}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-main>
</template>

<script lang="ts" setup>
import { Menu as IconMenu, House,Message, Setting,Notification,Pointer, Edit,Memo} from '@element-plus/icons-vue'
import {Options, setup, Vue} from 'vue-class-component';
import {computed, h, onMounted, ref} from "vue";
import axios from "axios";
import {Tool} from "@/util/tool";
import {ElNotification} from "element-plus";
import Chart from "@/views/admin/AdminChart.vue";
const books=ref()
const showContent=ref(false)
const options=ref()
const handleSelect = (key: string) => {
  if (key==="1"){
    homeQuery()
  }
  else {
    axios({
      method: 'get',
      url: '/book/list',
      // 传递参数
      params: {
        "category2Id":key,
        "pageNum":1,
        "pageSize":1000,
      },
      // 设置请求头信息
      headers: {

      }
    }).then((response) => {
      if (response.data.code===500){
        open1("red",response.data.message)
      }
      if (response.data.code===200){
        books.value=response.data.data.data
      }
    })
  }
}
const homeQuery=()=>{
  axios({
    method: 'get',
    url: '/book/all',
  }).then((response) => {
    books.value=response.data.data
  })
}
onMounted(()=>{
  axios({
    method: 'get',
    url: '/category/all',
    // 传递参数
  }).then((response) => {
    options.value=[]
    options.value=Tool.array2Tree(response.data.data,0)
    homeQuery()
  })
})
const open1 = (color:string,msg:string) => {
  ElNotification({
    title: '消息',
    message: h('i', { style: 'color: '+color }, msg),
    duration:3000,
  })
}
</script>
<style>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}
.bottom span{
  color: gray;
}

.image {
  width: 100%;
  display: block;
}
</style>
